<template>
  <div class="main_div">
    <div class="content_div">

      <div class="items_div">
        <MapItem :src="item.img" :label="item.name" :selected="selectId == index" v-for="item, index in mapsItem"
          @click="onselect(index)" />
      </div>

    </div>
  </div>
</template>

<script setup lang="js" name="Comp_BaseMap">
import { ref, inject, markRaw, onMounted, getCurrentInstance } from 'vue';
import MapItem from "./others/SubMenu_Item.vue"
let internalInstance = getCurrentInstance();

const mapsItem = markRaw(inject("config").basemap);
const nzczm = markRaw(inject("nzczm"));


let selectId = ref(0);

const onselect = (index) => {

  internalInstance.appContext.config.globalProperties.global_vars.basemap.selected_id = index;
  selectId.value = index;
  nzczm.selectBaseMap(mapsItem[index].type);
}

onMounted(() => {

  selectId.value = internalInstance.appContext.config.globalProperties.global_vars.basemap.selected_id;

})
</script>

<style scoped lang="less">
@import "../assets/css/subview.less";

.items_div {
  display: flex;
  flex-wrap: wrap;
  border: 0px solid #fff;
  justify-content: baseline
}
</style>